<template>
  <div class="home">
    <div class="phone-top">
      <!-- <img class="phone-top-img" src="@/assets/img/phoneTop.png" alt="" /> -->
      <div style="width: '100%'; height: 0.44rem" />
      <div class="search-bar">
        <p class="bar-tit">保障房</p>
        <div class="search-box">
          <img class="search-icon" src="@/assets/img/search.png" alt="">
          <input
            class="search-ipt"
            type="text"
            placeholder="请输入你想知道的内容"
          >
        </div>
        <div class="location-box">
          <img src="@/assets/img/dingwei.png" alt="">
        </div>
      </div>
    </div>
    <div class="banner-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img class="swipe-banner" src="@/assets/img/banner.png" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe-banner" src="@/assets/img/banner.png" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe-banner" src="@/assets/img/banner.png" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="swipe-banner" src="@/assets/img/banner.png" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="notification-bar">
      <div class="bar-left">
        <img class="laba" src="@/assets/img/laba.png" alt="">
        <p class="bar-news">余杭区公共租赁住房管理方案</p>
      </div>
      <div class="bar-right">
        <span class="more-text">查看更多</span>
        <img class="more-icon" src="@/assets/img/more.png" alt="">
      </div>
    </div>

    <div class="functional-area">
      <div
        v-for="(item, index) in functionAreaData"
        :key="index"
        class="function-module"
        @click="handleFunction(item)"
      >
        <img class="module-icon" :src="item.icon" alt="">
        <p class="module-title">{{ item.title }}</p>
      </div>
    </div>

    <div class="split-line" />

    <div class="news-container">
      <div class="category-bar">
        <div
          v-for="(text, index) in categoryData"
          :key="index"
          :class="[
            'category',
            activeCategory === index ? 'active-category' : '',
          ]"
          @click="handleCategory(index)"
        >
          {{ text }}
        </div>
      </div>
      <div class="news-list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index" class="news-item">
            <div class="news-info">
              <p class="news-title">{{ item.title }}</p>
              <p class="news-time">发布时间：{{ item.time }}</p>
            </div>
            <div class="news-icon">
              <img :src="item.img" alt="">
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <BottomBar />
  </div>
</template>

<script>
import { Swipe, SwipeItem, List } from 'vant'
import BottomBar from '../components/bottomBar'

export default {
  name: 'Home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List,
    BottomBar
  },
  data() {
    return {
      functionAreaData: [
        {
          id: 1,
          icon: require('@/assets/img/jingang1.png'),
          title: '申请模块'
        },
        {
          id: 2,
          icon: require('@/assets/img/jingang2.png'),
          title: '进度查询'
        },
        {
          id: 3,
          icon: require('@/assets/img/jingang3.png'),
          title: '人员管理'
        },
        {
          id: 4,
          icon: require('@/assets/img/jingang4.png'),
          title: '公示公告'
        }
      ],
      categoryData: ['新闻资讯', '政策法规', '办事指南', '常见问题'],
      activeCategory: 0,
      newsInformation: [
        {
          title: '2021年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2021/05/21',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '2020年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2020/03/12',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '2019年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2019/04/27',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '2018年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2018/04/11',
          img: require('@/assets/img/zixun1.png')
        }
      ],
      policies: [
        {
          title:
            '浙江省城镇公共租赁住房实物配租和租赁补贴管理办法（浙建规{2021}8号）',
          time: '2021/05/21',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '龙胜各族自治县公共租赁住房管理办法',
          time: '2020/03/12',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '2021年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2019/04/27',
          img: require('@/assets/img/zixun1.png')
        },
        {
          title: '2018年度中等偏下收入住房困难家庭申请公共租赁住房保障收入标准',
          time: '2018/04/11',
          img: require('@/assets/img/zixun1.png')
        }
      ],
      list: [],
      loading: false,
      finished: false,
      timer: null
    }
  },
  methods: {
    handleFunction(item) {
      if (item.id === 1) {
        this.$router.push({
          name: 'Shenq1'
        })
      }
      if (item.id === 2) {
        this.$router.push({
          name: 'progressQuery'
        })
      }
      if (item.id === 4) {
        this.$router.push({
          name: 'GongGao'
        })
      }
    },
    handleCategory(index) {
      this.activeCategory = index
      if (index === 1 || index === 0) {
        this.list = []
        this.onLoad()
      }
    },
    onLoad() {
      this.loading = true
      this.finished = false
      this.timer = setTimeout(() => {
        if (this.activeCategory === 0) {
          this.list = this.newsInformation
        }
        if (this.activeCategory === 1) {
          this.list = this.policies
        }
        this.loading = false
        this.finished = true
      }, 300)
    }
  }
}
</script>
<style scoped>
p {
  margin: 0;
}

.home {
  margin-bottom: 0.5rem;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 0;
}
.home::-webkit-scrollbar {
  display: none;
}
.phone-top {
  width: 100%;
}
.phone-top-img {
  width: 100%;
}
.search-bar {
  width: 100%;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -0.44rem;
}

.search-bar .bar-tit {
  font-size: 0.16rem;
  font-weight: 600;
  color: #000;
  padding: 0 0.2rem;
}

.search-bar .search-box {
  height: 0.32rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f5f6f6;
  padding-left: 0.18rem;
  border-radius: 0.04rem;
  box-sizing: border-box;
  flex-grow: 1;
}

.search-bar .search-box .search-icon {
  width: 0.17rem;
  margin-right: 0.06rem;
}

.search-bar .search-box .search-ipt {
  font-size: 0.14rem;
  color: #909090;
  border: none;
  outline: none;
  background: #f5f6f6;
}

.search-bar .location-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.5rem;
}

.search-bar .location-box > img {
  width: 0.24rem;
}

.banner-container {
  width: 100%;
  height: 1.8rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
  margin-top: 0.05rem;
}

.my-swipe {
  height: 1.8rem;
}

.swipe-banner {
  width: 3.45rem;
  height: 1.8rem;
}

.notification-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  box-sizing: border-box;
  margin: 0.1rem 0;
}

.notification-bar .bar-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.notification-bar .bar-left .laba {
  width: 0.16rem;
}

.notification-bar .bar-left .bar-news {
  font-size: 0.12rem;
  color: #2d2d2d;
  margin-left: 0.05rem;
}

.notification-bar .bar-right .more-text {
  color: #7d7d7d;
  font-size: 0.12rem;
  margin-right: 0.03rem;
}

.notification-bar .bar-right .more-icon {
  width: 0.05rem;
}

.notification-bar .bar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.functional-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0.2rem 0;
}

.function-module {
  width: 25%;
  height: 100%;
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.function-module .module-icon {
  height: 0.4rem;
}

.function-module .module-title {
  margin-top: 0.1rem;
}

.split-line {
  width: 100%;
  height: 0.12rem;
  background: #f2f3f5;
}

.news-container {
  width: 100%;
  background: #fff;
}

.category-bar {
  height: 0.46rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-bar .category {
  width: 25%;
  height: 100%;
  line-height: 0.46rem;
  font-size: 0.14rem;
  color: #2d2d2d;
  text-align: center;
}

.category-bar .active-category {
  font-size: 0.15rem;
  font-weight: bold;
  position: relative;
}

.category-bar .active-category:after {
  content: '';
  width: 0.2rem;
  height: 0.02rem;
  background: #5091eb;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.news-list {
  padding: 0 0.15rem;
  box-sizing: border-box;
}

.news-item {
  height: 100%;
  padding: 0.15rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f2f3f5;
}

.news-item .news-info {
  font-size: 0.14rem;
  color: #2d2d2d;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-grow: 1;
  margin-right: 0.1rem;
}

.news-item .news-info .news-time {
  font-size: 0.1rem;
  color: #7d7d7d;
  margin-top: 0.06rem;
}

.news-item .news-icon {
  height: 0.6rem;
  display: flex;
  justify-content: flex-start;
}

.news-item .news-icon > img {
  height: 0.54rem;
}
</style>
